<template>
  <div class="state">
    <!-- 左侧大框 -->
    <div class="s-left">
      <div class="content">
        <div class="base">
          <slot></slot>
        </div>
        <!-- 定位 -->
        <div class="secret flex" v-show="Data.label">
          <span v-for="(item, index) in Data.label" :key="index">{{
            item
          }}</span>
        </div>
        <!-- 进入画像 -->
        <div class="enter" v-show="Data.showEnter">进入画像</div>
      </div>
    </div>
    <!-- 右侧2按钮 -->
    <div class="s-right">
      <img src="../../assets/images/up.png" alt="" />
      <img src="../../assets/images/down.png" alt="" />
    </div>
  </div>
</template>

<script>
export default {
  props: {
    Data: {
      type: Object,
      default: {},
    },
  },
};
</script>

<style lang="scss" scoped>
.state {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;

  .s-left {
    width: 90%;
    padding:1.25rem;
    background: url(~@/assets/images/bbox.png) no-repeat 0 0;
    background-size: 100% 120%;
    .content {
      position: relative;
      width: 100%;
      height: 100%;
      .base {
        height: 100%;
        text-align: left;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }
      .secret {
        position: absolute;
        right: 0;
        top: 0;
        > span {
          padding: 3px 10px;
          color: #3b8bff;
          background: rgba(59, 139, 255, 0.2);
          border: 1px solid rgba(59, 139, 255, 1);
          border-radius: 12px;
          margin-left: 10px;
        }
      }
      .enter {
        position: absolute;
        right: 0;
        bottom: 0;
        color: rgba($color: #3e94fe, $alpha: 0.5);
      }
    }
  }
  .s-right {
    width: 5%;
    img {
      width: 100%;
    }
  }
}
</style>
